﻿@page "/chart/strip-line"

@using Syncfusion.Blazor
@using ThemeHelper
@using Syncfusion.Blazor.Charts

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample highlights a certain temperature range recorded over a week using the stripline support.</p>
</SampleDescription>
<ActionDescription>
    <p>In this example, you can see how to render and configure the stripline support. You can use the <code>ChartStripline</code> option to enable the stripline. The stripline is rendered based on the <code>Start</code> and <code>End</code> ranges specified, and you can add more than one stripline for the axis.</p>
    <p><code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
    <p>More information about the stripline can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/chart/strip-line'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <SfChart Title="Weather Report" Theme="@Theme">
        <ChartArea>
            <ChartAreaBorder Width="0"></ChartAreaBorder>
        </ChartArea>
        <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
        </ChartPrimaryXAxis>
        <ChartPrimaryYAxis Minimum="10" Maximum="40" Interval="5" LabelFormat="{value}°C" RangePadding="Syncfusion.Blazor.Charts.ChartRangePadding.None">
            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
            <ChartAxisLineStyle Color="#808080"></ChartAxisLineStyle>
            <ChartStriplines>
                <ChartStripline Start="30" End="40" Text="High Temperature" Color="#ff512f" Visible="true">
                    <ChartStriplineTextStyle Size="18px" Color="#ffffff" FontWeight="600"></ChartStriplineTextStyle>
                    <ChartStriplineBorder Width="0"></ChartStriplineBorder>
                </ChartStripline>
                <ChartStripline Start="20" End="30" Text="Average Temperature" Color="#fc902a" Visible="true">
                    <ChartStriplineTextStyle Size="18px" Color="#ffffff" FontWeight="600"></ChartStriplineTextStyle>
                    <ChartStriplineBorder Width="0"></ChartStriplineBorder>
                </ChartStripline>
                <ChartStripline Start="10" End="20" Text="Low Temperature" Color="#f9d423" Visible="true">
                    <ChartStriplineTextStyle Size="18px" Color="#ffffff" FontWeight="600"></ChartStriplineTextStyle>
                    <ChartStriplineBorder Width="0"></ChartStriplineBorder>
                </ChartStripline>
            </ChartStriplines>
        </ChartPrimaryYAxis>
        <ChartSeriesCollection>
            <ChartSeries Name="Weather" Type="ChartSeriesType.Line" DataSource="@WeatherReports" Fill="#ffffff" XName="Day" YName="Temperature" Width="2">
                <ChartMarker Visible="true" Width="10" Height="10" Fill="#666666">
                    <ChartMarkerBorder Width="2" Color="#ffffff"></ChartMarkerBorder>
                </ChartMarker>
            </ChartSeries>
        </ChartSeriesCollection>
        <ChartLegendSettings Visible="false"></ChartLegendSettings>
        <ChartTooltipSettings Enable="true"></ChartTooltipSettings>
    </SfChart>
</div>

@code{

    private Theme Theme { get; set; }
    public List<StripLineData> WeatherReports { get; set; } = new List<StripLineData>
    {
        new StripLineData { Day = "Sun", Temperature = 25 },
        new StripLineData { Day = "Mon", Temperature = 27 },
        new StripLineData { Day = "Tue", Temperature = 33 },
        new StripLineData { Day = "Wed", Temperature = 36 },
        new StripLineData { Day = "Thu", Temperature = 26 },
        new StripLineData { Day = "Fri", Temperature = 27.5 },
        new StripLineData { Day = "Sat", Temperature = 23 },
    };

    protected override void OnInitialized()
    {
        Theme = ThemeHelper.GetCurrentTheme(NavigationManager.Uri);
    }

    public class StripLineData
    {
        public string Day { get; set; }
        public double Temperature { get; set; }
    }

}